<template>
	<view>
		<view v-show="listData.ifshow" @tap="ableClose" @touchmove.stop.prevent class="popup">
		</view>
		<view class="popup-content" :style="locationStyle">
			<slot name="content"></slot>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		computed,
		watch
	} from 'vue';
	const listData = reactive({
		ifshow: false, // 是否展示,
		//#ifdef H5
		translateValue: -150, // 位移距离
		//#endif
		//#ifndef H5
		translateValue: -100, // 位移距离
		//#endif
		timer: null,
		iftoggle: false
	})
	const emits = defineEmits(['closeCallBack', 'change'])
	const props = defineProps({
		showPop: {
			type: Boolean,
			default: false,
		},
		direction: {
			type: String,
			default: 'top', // 方向  top，bottom，left，right 
		},
		autoClose: {
			type: Boolean,
			default: true,
		}
	})

	const translateObj = computed(() => {
		const transformObj = {
			'top': `transform:translateY(${-listData.translateValue}%)`,
			'bottom': `transform:translateY(${listData.translateValue}%)`,
			'left': `transform:translateX(${-listData.translateValue}%)`,
			'right': `transform:translateX(${listData.translateValue}%)`
		};
		return transformObj[props.direction]
	})
	const locationStyle = computed(() => {
		const positionValue = {
			//#ifndef H5
			'top': 'bottom:0px;width:100%;',
			//#endif
			//#ifdef H5
			'top': 'bottom:50px;width:100%;',
			//#endif
			'bottom': 'top:0px;width:100%;',
			'left': 'right:0px;height:100%;',
			'right': 'left:0px;height:100%;',
		};
		
		return positionValue[props.direction] + translateObj.value;
	})
	
	onMounted(() => {
		if (props.showPop) {
			show();
		}
	})
	
	watch(() => props.showPop, (newVal, oldVal) => {
		if (newVal) {
			show();
		} else {
			close();
		}
	})
	const show = (events) => {
		listData.ifshow = true;
		let _open = setTimeout(() => {
			listData.translateValue = 0;
			_open = null;
		}, 100)
		let _toggle = setTimeout(() => {
			listData.iftoggle = true;
			_toggle = null;
		}, 300);
	}
	const close = () => {
		if (listData.timer !== null || !listData.iftoggle) {
			return;
		}
		listData.translateValue = -100;
		//#ifdef H5
		listData.translateValue = -150
		//#endif
		listData.timer = setTimeout(() => {
			listData.ifshow = false;
			listData.timer = null;
			listData.iftoggle = false;
			emits('closeCallBack', null);
			emits('change', false)
		}, 300);
	}
	const ableClose = () => {
		if (listData.autoClose) {
			close();
		}
	}
</script>

<style lang="scss">
	.popup {
		position: fixed;
		z-index: 96;
		background: rgba(0, 0, 0, .3);
		height: 100%;
		width: 100%;
		top: 0px;
		left: 0px;
		overflow: hidden;
	}

	.popup-content {
		position: fixed;
		z-index: 99;
		background: #FFFFFF;
		transition: all .3s ease;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 20rpx;
	}
</style>